<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue-四级项目3</title>
</head>
<body>
<div id="app">
    <form>
        <h1>注册</h1>
        用户名：<input type="text" v-model="yonghuming"><br>
        密码：<input type="password" v-model="mima"><br>
        确认密码：<input type="password" v-model="querenmima"><br>
        性别：<input type="radio" name="sex" v-model="xingbie" value="0">男
        <input type="radio" name="sex" v-model="xingbie" value="1">女<br>
        爱好：<input type="checkbox" v-model="aihao" value="0">读书
        <input type="checkbox" v-model="aihao" value="1">体育
        <input type="checkbox" v-model="aihao" value="2">旅游<br>
        国籍：<select v-model="guojia">
        <option value="0">中国</option>
        <option value="1">美国</option>
        <option value="2">德国</option>
    </select><br>
        个人简介：<textarea rows="5" cols="" v-model="jianjie"></textarea><br>
        <input type="button" value="提交" @click="dianji">
    </form>
</div>

<script src="./vue.global.js"></script>
<script>
    const vue=Vue.createApp({
       data(){
           return{
               yonghuming:'',
               mima:'',
               querenmima:'',
               xingbie:0,
               aihao:[0,1,2],
               guojia:0,
               jianjie:'',
           }
       },
       methods:{
           dianji(){
               console.log(this.yonghuming)
               console.log(this.mima)
               console.log(this.querenmima)
               console.log(this.xingbie)
               console.log(this.aihao)
               console.log(this.guojia)
               console.log(this.jianjie)
           }
       }
    }).mount('#app')
</script>
</body>
</html>